<!DOCTYPE  HTML>
<html>
<head>
<script
src="http://code.jquery.com/jquery-1.8.3.js">
</script>
<script>
//$(document).ready(function(){
$(function(){
	console.log("this",this);
	/* $ === jQuery약자
	 * = 대입
	 * == 값이 같느냐
	 * === 값도 같고 타입도 같느
	 */
	console.log("$",$);
	console.log("jQuery",jQuery);
	$("img").click(function(){
		console.log("this",this);
		$(this).hide(1000);
	});
	$("ol li.center").click(function(){
		$(this).hide(1000);
	});
	// ol의 자식중에서 맨 처음에 있는 
	// $("ol:first-child").click(function(){
		// console.log("this",this);
		// $(this).css("background","red");
	// });
	// li중에
	$("li:last").click(function(){
		console.log("this",this);
		$(this).css("color","blue");
		$(this).css("font-size","1.5em");
	});
	// 짝수만
	$("td:odd").css("background-color","gray");
	// 홀수만
	$("td:even").css("background-color","pink");
	// 속성중 type이 "text"인 것들
	$("input:text").css("color","#ff00ff");
	$("[name='country']").css("font-size","1.5em");
	// width속성이 존재하는 것
	$("[width]").css("width","200px");
	// height가 100이 아닌 모든 것들(body까지도 포)
	$("[height!=100]").css("background-color","brown");
	var number=0;	//전역 변수 선
	$("img").mouseenter(function(){
		// 원래의 크기보다 10% 증가시키겠다.
		// 원래 width값 return
		originalWidth=$(this).css("width")	//원래 width값 return
		// 01234  , 0부터 4전까지의 값을 빼오자
		// 200px * 1.5 = NaN
		number=originalWidth.substring(0,3);
		console.log("number",number);
		$(this).css("width",number*1.1+"px");
	}).mouseleave(function(){
		$(this).css("width",number+"px");
	});
	var i=0;
	//더블클릭과 클릭을 같이 셋팅하면 클릭만 됩니다.
	$(":text").click(function(){
		i++;
		$(this).css("color","gold")
				.css("background-color","black")
				.css("font-size",i*4+"px");
	}).focus(function(){
		$(this).css("backgroung-color","white")
	}).blur(function(){
		$(this).css("background-color","red")
	});
	//focus상태 : 글을 쓸 수 있는 상태(커서가 깜빡)
	//blur상태 : 글을 못 쓰는 상태(커서가 없다)
	$("div").toggle(
		function(){
			// 500 ms, 끝나면 yello 실행하라(callback)
			$("img").hide(500, yello);
		},function(){
			// 300ms, 끝나면 white 실행하라(callback)
			$("img").show(300, white);
		});
	yello=function(){
		$("div").css("background-color","yellow");
	}
	white=function(){
		$("div").css("background-color","white");
	}
		//toggle은 온오프와 같다
});
</script>
</head>
<body>
	<input type="text" name="country" value="korea">
	<table>
		<tr><td>first</td><td>second</td></tr>
		<tr><td>third</td><td>fourth</td></tr>
	</table>
	<ol><li> ask01.jpg</li><li class="center"> ask02.jpg</li><li> ask03.jpg</li></ol>
	<div> show and hide </div>
	<img src="image/ask01.jpg" width="150">
	<img src="image/ask02.jpg" width="150">
	<img src="image/ask03.jpg" width="150">
	
</body>
</html>
